<template>
  <div class="q-pa-md row items-start q-gutter-md">
    <t-card class="my-card" flat bordered>
      <img src="https://cdn.quasar.dev/img/parallax2.jpg" />

      <t-list>
        <t-item clickable>
          <t-item-section avatar>
            <t-icon color="primary" name="local_bar" />
          </t-item-section>

          <t-item-section>
            <t-item-label>Bar XYZ</t-item-label>
            <t-item-label caption>Have a drink.</t-item-label>
          </t-item-section>
        </t-item>

        <t-item clickable>
          <t-item-section avatar>
            <t-icon color="red" name="local_gas_station" />
          </t-item-section>

          <t-item-section>
            <t-item-label>Gas Station</t-item-label>
            <t-item-label caption>Fill your gas tank.</t-item-label>
          </t-item-section>
        </t-item>

        <t-item clickable>
          <t-item-section avatar>
            <t-icon color="amber" name="local_movies" />
          </t-item-section>

          <t-item-section>
            <t-item-label>Cinema XYZ</t-item-label>
            <t-item-label caption>Watch a movie.</t-item-label>
          </t-item-section>
        </t-item>
      </t-list>
    </t-card>

    <t-card class="my-card" flat bordered>
      <img src="https://cdn.quasar.dev/img/mountains.jpg" />

      <t-card-actions align="right">
        <t-btn flat round color="red" icon="favorite" />
        <t-btn flat round color="teal" icon="bookmark" />
        <t-btn flat round color="primary" icon="share" />
      </t-card-actions>
    </t-card>

    <t-card class="my-card" flat bordered>
      <t-card-section>
        <div class="text-h6 q-mb-xs">Our Changing Planet</div>
        <div class="row no-wrap items-center">
          <t-rating size="18px" v-model="stars" :max="5" color="primary" />
          <span class="text-caption text-grey q-ml-sm">4.2 (551)</span>
        </div>
      </t-card-section>

      <img src="https://cdn.quasar.dev/img/mountains.jpg" />
    </t-card>

    <t-card class="my-card" flat bordered>
      <t-img src="https://cdn.quasar.dev/img/chicken-salad.jpg" />

      <t-card-section>
        <t-btn
          fab
          color="primary"
          icon="place"
          class="absolute"
          style="top: 0; right: 12px; transform: translateY(-50%)"
        />

        <div class="row no-wrap items-center">
          <div class="col text-h6 ellipsis"> Cafe Basilico </div>
          <div
            class="col-auto text-grey text-caption q-pt-md row no-wrap items-center"
          >
            <t-icon name="place" />
            250 ft
          </div>
        </div>

        <t-rating v-model="stars" :max="5" size="32px" />
      </t-card-section>

      <t-card-section class="q-pt-none">
        <div class="text-subtitle1"> $・Italian, Cafe </div>
        <div class="text-caption text-grey">
          Small plates, salads & sandwiches in an intimate setting.
        </div>
      </t-card-section>

      <t-separator />

      <t-card-actions>
        <t-btn flat round icon="event" />
        <t-btn flat color="primary"> Reserve </t-btn>
      </t-card-actions>
    </t-card>
  </div>
</template>

<script>
  import { ref } from 'vue';

  export default {
    setup() {
      return {
        stars: ref(4),
      };
    },
  };
</script>

<style lang="sass" scoped>
  .my-card
    width: 100%
    max-width: 300px
</style>
